<template>
  <!-- jz高级搜索-组件(自定义) -->
  <el-dialog ref="dialog" class="filter-dialog" :title="dialog.title||'高级搜索'" :visible.sync="dialog.open"
    :close-on-click-modal="isClose" :close-on-press-escape="isClose" v-el-drag-dialog
    width="510px" center @open="openHandle" v-bind="dialog">
    <el-row>
      <el-col :span="12" :xs="24" style="margin-bottom: 10px;">
        <el-select v-model="groupOp" placeholder="请选择" size="mini">
          <el-option v-for="item in relatives" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-button style="margin: 0 10px;" icon="el-icon-plus" size="mini"
          circle type="primary" @click="btnHandle(1)"></el-button>
      </el-col>

      <el-table stripe style="width: 100%" border :data="rules" height="200">
          <el-table-column align="center" label="字段">
            <template #default="{row}">
              <el-select v-model="row.field" placeholder="请选择" size="mini">
                <el-option v-for="item in fields" :key="item[fId]" :label="item[fName]" :value="item[fId]" />
              </el-select>
            </template>
          </el-table-column>
        <el-table-column align="center" label="条件">
          <template #default="{row}">
            <el-select v-model="row.op" placeholder="请选择" size="mini">
              <el-option v-for="item in conditions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="data" align="center" label="搜索值">
          <template #default="{row}">
            <el-input v-model="row.data" size="mini" clearable />
          </template>
        </el-table-column>
        <el-table-column prop align="center" label="操作" width="50">
          <template #default="{$index}">
            <el-button circle type="primary" size="mini" icon="el-icon-minus"
              @click="btnHandle(2,$index)" />
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <span slot="footer">
      <el-button @click="btnHandle(3)">重 置</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as propDef from './config/jzSearch'
export default {
  name: 'jzSearch',
  props: {
    dialog: {
      type: Object,
      default: () => {
        return { open: false, title: '高级搜索' }
      }
    },
    fields: { // 字段
      type: Array,
      default() {
        return propDef.fields
      }
    },
    conditions: { // 条件
      type: Array,
      default() {
        return propDef.conditions
      }
    },
    relatives: { // 关系
      type: Array,
      default() {
        return propDef.relatives
      }
    },
    fId: { // 字段-id默认key值
      type: String,
      default: 'id'
    },
    fName: { // 字段-name默认key值
      type: String,
      default: 'name'
    },
    isClose: { // 是否允许其他-关闭弹窗
      type: Boolean,
      default: true
    },
    data: { // 已有数据
      type: Array,
      default() { return [] }
    }
  },
  data() {
    return {
      rules: [], groupOp: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化
    initData() {
      this.groupOp = this.relatives[0].id
      if (this.data && this.data.length) {
        this.rules = this.data
      } else {
        this.rules = [this.reset()]
      }
    },
    // 打开窗口
    openHandle() {
      const domDialog = this.$refs.dialog.$el.querySelector('.el-dialog')
      domDialog.style.top = 0
      domDialog.style.left = 0
      domDialog.style.marginBottom = 0
      this.initData() // 初始化-数据
    },
    // 按钮-回调
    btnHandle(type, index) {
      switch (type) {
        case 1: // 新增
          this.rules.push(this.reset())
          break
        case 2: // 删除
          this.rules.splice(index, 1)
          break
        case 3: // 重置
          this.rules = [this.reset()]
          break
      }
    },
    // 确定-回调
    submit() {
      const data = { groupOp: this.groupOp, rules: this.rules }
      if (this.dialog.callback) {
        this.dialog.callback(data)
      } else {
        this.$emit('submit', data)
      }
      this.dialog.open = false
    },
    // 重置数据
    reset() {
      const field = this.fields[0] ? this.fields[0][this.fId] : ''
      const op = this.conditions[0] ? this.conditions[0].id : ''
      return { field, op, data: '' }
    }
  },
  filters: {

  }
}
</script>
<style lang="scss" scoped>
// .filter-dialog{
//   ::v-deep .el-dialog__body {
//     padding: 10px;
//   }
//   ::v-deep .el-dialog{
//     position: relative;
//     left: 0;
//     top: 0;
//     transform: none !important;
//   }
// }
</style>
